<template>
    <div class="main-page-content page-demo-step">
        <ContentHeader title="这里是步骤表单" explain="将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。"></ContentHeader>

        <div class="page-content">

            <!-- 步骤条 start -->
            <a-row>
                <a-col :span="14" :offset="5">
                    <a-steps :current="active_step">
                        <a-step>
                            <template slot="title">第一步</template>
                            <span slot="description">填写转账信息</span>
                        </a-step>
                        <a-step>
                            <template slot="title">第二步</template>
                            <span slot="description">确认转账信息</span>
                        </a-step>
                        <a-step>
                            <template slot="title">第三步</template>
                            <span slot="description">完成</span>
                        </a-step>
                    </a-steps>
                </a-col>
            </a-row>
            <!-- 步骤条 end -->

            <!-- 步骤表单 start -->
            <div class="step_form" v-show="active_step==1">
                <a-spin tip="Loading..." :spinning="form_show_loading">
                <a-form-model
                    ref="formDataStep1"
                    :model="form_data_step1"
                    :rules="rules_step1"
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 8, }"
                >

                    <a-form-model-item ref="pay_account" label="付款账户：" prop="pay_account">
                        <a-select style="width: 100%;" v-model="form_data_step1.pay_account">
                            <a-select-option value="1">abcdefg@company.com</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item ref="receive_account" label="收款账户：" prop="receive_account">
                        <a-input-group compact>
                            <a-select v-model="form_data_step1.receive_type" style="width:30%;">
                                <a-select-option value="wxpay">微信</a-select-option>
                                <a-select-option value="alipay">支付宝</a-select-option>
                            </a-select>
                            <a-input style="width: 70%" v-model="form_data_step1.receive_account" />
                        </a-input-group>
                    </a-form-model-item>
                    <a-form-model-item ref="receive_user" label="收款人姓名：" prop="receive_user">
                        <a-input v-model="form_data_step1.receive_user"></a-input>
                    </a-form-model-item>
                    <a-form-model-item ref="pay_money" label="付款金额：" prop="pay_money">
                        <a-input prefix="￥" type="number" suffix="RMB"  style="width:100%;" v-model="form_data_step1.pay_money" />
                    </a-form-model-item>
                    <a-form-model-item :wrapper-col="{ span: 10, offset: 8 }">
                        <a-button type="primary" @click="onSubmit('formDataStep1',2)">下一步</a-button>
                        <a-button style="margin-left: 10px;" @click="resetForm('formDataStep1')">重置</a-button>
                    </a-form-model-item>
                </a-form-model>
            </a-spin>
            </div>
            <!-- 步骤表单 end -->

            <!-- 步骤表单 start -->
            <div class="step_form" style="width:30%;margin:50px auto;" v-show="active_step==2">
                <a-spin tip="Loading..." :spinning="form_show_loading">
                <a-form-model
                    ref="formDataStep2"
                    :model="form_data_step2"
                    :rules="rules_step2"
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16, }"
                >
                    <a-form-model-item label="付款账户：" >
                        {{ form_data_step1.pay_account }}
                    </a-form-model-item>
                    <a-form-model-item label="收款账户：" >
                        {{ form_data_step1.receive_account }}
                    </a-form-model-item>
                    <a-form-model-item label="收款人姓名：">
                        {{ form_data_step1.receive_user }}
                    </a-form-model-item>
                    <a-form-model-item label="付款金额：">
                        {{ form_data_step1.pay_money }}
                    </a-form-model-item>
                    <a-divider />
                    <a-form-model-item label="支付密码：" prop="pay_password">
                        <a-input type="password" style="width:100%;" v-model="form_data_step2.pay_password"></a-input>
                    </a-form-model-item>
                    
                    <a-form-model-item :wrapper-col="{ span: 10, offset: 8 }">
                        <a-button type="primary" @click="onSubmit('formDataStep2',3)">确认</a-button>
                        <a-button style="margin-left: 10px;" @click="active_step--">上一步</a-button>
                    </a-form-model-item>
                </a-form-model>
            </a-spin>
            </div>
            <!-- 步骤表单 end -->

            <!-- 步骤表单 start -->
            <div class="step_form" v-show="active_step==3">
                <a-result
                    status="success"
                    title="操作成功"
                    sub-title="预计2小时内到账"
                    style="width:50%;margin:0px auto;"
                >
                    <template #icon>
                        <a-icon type="check-circle" />
                        <!-- <a-icon type="smile" theme="twoTone" /> -->
                    </template>     
                    <template #extra>
                        <a-button key="console" type="primary">
                            再转一笔
                        </a-button>
                        <a-button key="buy">
                            查看账单
                        </a-button>
                    </template>

                    <div class="desc" >
                        <p>
                            <a-icon type="check-circle" /> 付款账户：1106535856@qq.com
                        </p>
                        <p>
                            <a-icon type="check-circle" /> 收款账户：1106535856@qq.com
                        </p>
                        <p>
                            <a-icon type="check-circle" /> 付款金额：￥2000.00
                        </p>
                    </div>
                </a-result>
            </div>
            <!-- 步骤表单 end -->
            
        </div>

    </div>
</template>

<script>
import ContentHeader from "@/components/content_header/content_header";
export default {
    components:{
        ContentHeader
    },
    data(){
        return {
            "active_step"   : 1,
            "form_show_loading"  : false,
            
            // 表单1
            "form_data_step1"   : {
                "pay_account"       : "",
                "receive_type"      : "wxpay",
                "receive_account"   : "",
                "receive_user"      : "",
                "pay_money"         : 2000,
            },
            // 表单规则1
            "rules_step1" : {
                "pay_account"  : [
                    { required: true, message: '请选择付款账户', trigger: 'blur' },
                ],
                "receive_account"  : [
                    { required: true, message: '请填写收款账户', trigger: 'blur' },
                ],
                "receive_user"  : [
                    { required: true, message: '请填写收人款姓名', trigger: 'blur' },
                ],
                "pay_money"  : [
                    { required: true, message: '请填写付款金额', trigger: 'blur' },
                ],

            },

            // 表单2
            "form_data_step2"   : {
                "pay_password"       : "",
            },
            // 表单规则2
            "rules_step2" : {
                "pay_password"  : [
                    { required: true, message: '请输入支付密码', trigger: 'blur' },
                ],
            }
        }
    },
    methods:{
        onSubmit(form_key="",step_value=0) {
            this.$refs[form_key].validate(valid => {
                if (valid) {
                    this.form_show_loading = true;
                    setTimeout(()=>{
                        this.form_show_loading = false;
                        if(step_value){
                            this.active_step = step_value;
                        }
                    },1500)
                    
                } else {
                    this.$message.warning('请先完成表单内容');
                    return false;
                }
            });
        },
        resetForm(form_key="") {
            this.$refs[form_key].resetFields();
        },
    }

}
</script>


<style lang="less" scoped>
@import "./step.less";
</style>